<template>
	<div class="yingmoo-store">
		<ul class="nav">
			<li @click="getRequires(1),setsession(1),session=1" :style='{"background-color":session==1? "#036eb7" :"","color":session==1? "white" :""}'>需求单</li>
<!--			<li @click="getRequires(2),setsession(2),session=2" :style='{"background-color":session==2? "#036eb7" :"","color":session==2? "white" :""}'>询价单</li>-->
			<!--<router-link tag="li" to="/ymMemberneed">投放单</router-link>
			<router-link tag="li" to="/ymMemberenquiry" ">询价单</router-link>-->

			<el-button type="text" @click="centerDialogVisible = true">添加需求</el-button>

			<el-dialog title="请填写你的需求描述" :visible.sync="centerDialogVisible" width="30%" center>
				<textarea v-model="requireForm.description" rows="10" cols="60" placeholder="请填写你的需求描述" :style='{"resize":"none","width":"98%"}'></textarea>
				<span slot="footer" class="dialog-footer">
          <!--<router-link tag="el-button" to="/ymMemberneedlist" type="primary" @click="createRequireForm()">提 交</router-link>-->
          <el-button @click="createRequireForm">提交</el-button>
          <el-button @click="centerDialogVisible = false">取 消</el-button>
        </span>
			</el-dialog>
		</ul>
		<div class="error">
			<p>您当前发布了<span>{{size}}</span>条投放需求</p>
			<div class="list">
				<el-table ref="multipleTable" :data="requireList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="id" lable="ID" v-if="show"></el-table-column>
					<el-table-column prop="description" label="需求描述" show-overflow-tooltip></el-table-column>
					<el-table-column label="申请人" width="120">
						<template slot-scope="scope">{{user.contentUser}}</template>
					</el-table-column>
					<el-table-column label="手机号" width="120">
						<template slot-scope="scope">{{user.mobile}}</template>
					</el-table-column>
					<el-table-column prop="createTime" label="申请日期" width="180">
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button class="btn2" type="text" size="small">
								查看状态
							</el-button>
							<el-button class="btn" @click="deleteOne(scope.row.id)" type="text" size="small">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div style="margin-top: 20px">
				<el-button class="needlist_btn1" @click="toggleSelection()">取消选择</el-button>
				<el-button class="needlist_btn2" @click="deleteMulti">删除</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "yingmoo-store",
		data() {
			return {
				requestAddr:this.GLOBAL.addr,
				user:{},
				requireList:[],
				addr:"http://172.16.10.52:8080",
				size:0,
				type:1,
				show:false,
        		session: 1,
				centerDialogVisible: false,
				requireForm: {},
				multipleSelection: []
			};
		},
		mounted(){
			this.getRequires(1);
      this.getsession() 	
		},
		methods: {
			deleteOne(id) {
		      var ids = [id];
		      this.$confirm("确认删除该条需求吗？","删除提示",{
		      	confirmButtonText:"确定",
		      	cancelButtonText:"取消",
		      	type:"warning"
		      }).then(()=>{
		      	this.$http.post(this.requestAddr+"/GetJson/delRequire",{"ids":ids},{emulateJSON:true}).then(
		      		(res)=>{
		      			this.getRequires(this.type)
		      		}
		      	)
		      })
		    },
		    deleteMulti() {
		      var ids = new Array();
		      for(var i=0; i<this.multipleSelection.length; i++){
		      	ids[i] = this.multipleSelection[i].id;
		      }
		      this.$confirm("确认删除选中的需求吗？","删除提示",{
		      	confirmButtonText:"确定",
		      	cancelButtonText:"取消",
		      	type:"warning"
		      }).then(()=>{
		      	this.$http.post(this.requestAddr+"/GetJson/delRequire",{"ids":ids},{emulateJSON:true}).then(
		      		(res)=>{
		      			this.getRequires(this.type)
		      		}
		      	)
		      })
		    },
			getRequires:function(type){
				this.type = type;
				this.user = JSON.parse(localStorage.getItem("user"));
				this.$http.post(this.requestAddr+"/GetJson/getRequireList",{"memberId":this.user.autoId,"type":type},{emulateJSON:true}).then(
					(res)=>{
						if(res.data.code == 0){
							this.requireList = res.data.requireList;
							this.size = (this.requireList).length;
						}else if(this.type == 1){
							window.location.href = "../#/ymMemberneed"
						}else{
							window.location.href = "../#/ymMemberenquiry"
						}
					}
				)
			},
			createRequireForm: function() {
				this.user = JSON.parse(localStorage.getItem("user"));
				this.requireForm.memberId = this.user.autoId;
				this.requireForm.status = 0;
				this.requireForm.type = this.type;
				this.$http.post(this.requestAddr+"/GetJson/createRequireForm", this.requireForm, {
					emulateJSON: true
				}).then(
					(res) => {
						if(res.data.code == 0){
	    					this.$confirm('您的需求已成功提交！', '成功提示', {
				            confirmButtonText: '确定',
				            cancelButtonText: '取消',
				            type: 'warning' 
				        }).then(
				        	()=>{
				        		this.centerDialogVisible = false;
				        		this.getRequires(this.type);
				        	}
				        )
	    				}
					}
				)
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
	        setsession: function(odd) {
	          window.sessionStorage.setItem('odd', odd)
	        },
	        getsession: function() {
	          this.curr = window.sessionStorage.getItem('odd')
	        }
		}
	}
</script>
<style scoped>
	.needlist_btn1{
		margin-left: 50px;
    	padding: 8px 16px;
	}
	.needlist_btn2{
    	padding: 8px 16px;
	}
	.el-button--text {
		width: 103px;
		height: 30px;
		font-size: 16px;
		line-height: 25px;
		color: white;
		background-color: #f29600;
		text-align: center;
		border-radius: 7px;
		margin-left: 950px;
		cursor: pointer;
	}
	
	.el-button--text {
		padding-top: 0;
	}
	
	.el-dialog__title {
		text-align: inherit !important;
		color: #036eb7;
	}
</style>
<style>
	.el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid #dddddd;
	}
	
	.el-table tr {
		text-align: center;
	}
	
	.el-table th>.cell {
		text-align: center;
	}
	
	.el-button {
		margin-left: 50px;
		padding: 8px 16px;
	}
	
	.btn,
	.btn2 {
		width: 70px !important;
		height: 23px !important;
		margin-left: 0px !important;
		border-radius: 3px !important;
		color: #999999 !important;
		background: none !important;
		font-size: 14px !important;
		line-height: 23px !important;
	}
	
	.btn2 span:hover {
		color: #f29600;
	}
	
	.btn span:hover {
		color: #f29600;
	}
</style>
<style scoped lang="less">
	.yingmoo-store {
		width: 100%;
		.nav {
			width: 1200px;
			height: 46px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			background-color: #f2f2f2;
			margin-top: 20px;
			li {
				list-style: none;
				width: 90px;
				height: 30px;
				margin: 0 20px;
				line-height: 30px;
				color: #666666;
				text-align: center;
				font-size: 16px;
				cursor: pointer;
				&:hover {
					background-color: #036eb7;
					color: white;
				}
				/*&:nth-child(1) {
					background-color: #036eb7;
					color: white;
				}*/
			}
			.uploading {
				width: 103px;
				font-size: 16px;
				color: white;
				background-color: #f29600;
				text-align: center;
				border-radius: 7px;
				margin-left: 820px;
				cursor: pointer;
			}
		}
		.error {
			width: 1200px;
			height: 665px;
			background-color: white;
			margin: 0 auto;
			p {
				font-size: 14px;
				color: #666666;
				margin-left: 50px;
				padding-top: 45px;
			}
			.list {
				width: 1125px;
				margin-left: 50px;
				margin-top: 20px;
				border: 1px solid #dddddd;
			}
		}
	}
</style>